<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    
    <!-- 现代化字体（只保留 Inter 400/700，JetBrains Mono 400/500） -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- 动画库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="style.css">
    
    <!-- Markdown解析器 -->
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.6/purify.min.js"></script>
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="16x16" href="icon-16.png">
    <link rel="icon" type="image/png" sizes="32x32" href="icon-32.png">
    <link rel="icon" type="image/png" sizes="48x48" href="icon-48.png">
    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Ccircle cx='32' cy='32' r='32' fill='%238e44ad'/%3E%3C/svg%3E">

    <!-- Codemirror 5 样式和脚本（移除 Codemirror 6 样式） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.css">
    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/lib/codemirror.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/codemirror@5.65.16/mode/markdown/markdown.min.js"></script>

    <!-- PWA: manifest & iOS 支持 -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#6a7ba2">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <link rel="apple-touch-icon" href="icon-192.png">
    <title>简·记</title>
    <script src="https://cdn.jsdelivr.net/npm/turndown@7.1.2/dist/turndown.min.js"></script>
</head>
<body>
    <div class="mobile-drawer-hint">
      <svg width="18" height="36" viewBox="0 0 18 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <polyline points="6,12 12,18 6,24" stroke="#a3a380" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <div class="pc-drawer-hint">
      <svg width="18" height="36" viewBox="0 0 18 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <polyline points="6,12 12,18 6,24" stroke="#a3a380" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
      </svg>
    </div>
    <div class="app-container">
        <!-- 侧栏内容 -->
        <div class="notes-list-panel drawer-collapsed animate__animated animate__fadeInLeft">
            <div class="notes-panel-header">
                <div class="sidebar-header">
                    <h2><i class="fas fa-book"></i> 笔记列表</h2>
                    <button id="addNoteBtn" class="btn-close" aria-label="新建笔记" tabindex="0" role="button">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
                <input type="text" id="searchInput" class="search-input" placeholder="搜索笔记..." autocomplete="off" aria-label="搜索笔记" tabindex="0" />
                <div class="tags-list-wrapper">
                    <div id="tagsList" class="tags-list"></div>
                </div>
            </div>
            <div class="notes-container">
                <ul id="notesList"></ul>
            </div>
        </div>
        <!-- 遮罩层，初始隐藏 -->
        <div class="drawer-mask"></div>
        <!-- 主内容区 -->
        <div class="main-content-wrapper">
            <!-- 云同步按钮和弹窗 -->
            <div class="cloud-sync-bar">
                <button id="importAllBtn" class="import-all-btn" title="导入全部笔记" aria-label="导入全部笔记" tabindex="0" role="button"><i class="fas fa-file-import"></i></button>
                <button id="cloudSyncBtn" class="cloud-sync-btn" title="云同步" aria-label="云同步" tabindex="0" role="button"><i class="fas fa-cloud"></i></button>
            </div>
            <div id="cloudSyncModal" class="cloud-sync-modal hidden">
                <div class="cloud-sync-modal-content">
                    <h3><i class="fas fa-cloud"></i> 云同步设置</h3>
                    <label>GitHub Token <input type="password" id="cloudTokenInput" placeholder="GitHub Token" autocomplete="off" aria-label="GitHub Token" tabindex="0"></label>
                    <label>Gist ID（可留空自动创建）<input type="text" id="cloudGistIdInput" placeholder="Gist ID" aria-label="Gist ID" tabindex="0"></label>
                    <div class="cloud-sync-modal-actions">
                        <button id="cloudSyncPullBtn" class="btn-primary" aria-label="拉取云端" tabindex="0" role="button"><i class="fas fa-download"></i> 拉取云端</button>
                        <button id="cloudSyncPushBtn" class="btn-primary" aria-label="上传云端" tabindex="0" role="button"><i class="fas fa-upload"></i> 上传云端</button>
                        <button id="cloudSyncCloseBtn" class="btn-close" aria-label="关闭云同步弹窗" tabindex="0" role="button"><i class="fas fa-times"></i></button>
                    </div>
                    <div id="cloudSyncStatus" class="cloud-sync-status"></div>
                </div>
            </div>
            <!-- 笔记头部 -->
            <div class="note-header">
                <div class="note-title-row">
                    <input type="text" id="noteTitle" placeholder="输入笔记标题..." aria-label="笔记标题" tabindex="0">
                </div>
                <div class="note-header-top">
                    <div class="note-meta">
                        <span class="word-count" id="wordCount">0 字</span>
                    </div>
                    <div class="note-separator"></div>
                    <div class="note-actions">
                        <button id="editBtn" class="btn-edit" aria-label="编辑/预览切换" tabindex="0" role="button">
                            <i class="fas fa-edit"></i><span class="btn-text"> 编辑笔记</span>
                        </button>
                        <button id="showVersionsBtn" class="btn-history" aria-label="查看历史版本" tabindex="0" role="button">
                            <i class="fas fa-history"></i><span class="btn-text"> 查看历史</span>
                        </button>
                        <button id="exportNoteBtn" class="btn-export" aria-label="导出笔记" tabindex="0" role="button">
                            <i class="fas fa-file-export"></i><span class="btn-text"> 导出笔记</span>
                        </button>
                        <button id="cloudSyncBtnMobile" class="btn-cloud" aria-label="云同步" tabindex="0" role="button">
                            <i class="fas fa-cloud"></i>
                        </button>
                    </div>
                </div>
            </div>
            <!-- 主内容区域 -->
            <div class="note-main-panel animate__animated animate__fadeIn">
                <!-- 笔记内容区域 -->
                <div class="content-area">
                    <div id="notePreview" class="markdown-body"></div>
                    <textarea id="noteEditor" placeholder="在此输入笔记内容...&#10;&#10;支持 Markdown 语法：&#10;# 标题&#10;**粗体** *斜体*&#10;- 列表项&#10;```代码块```" aria-label="笔记内容编辑区" tabindex="0"></textarea>
                </div>
                <!-- 移动端浮动工具条，仅编辑模式下显示 -->
                <div class="mobile-toolbar" id="mobileToolbar">
                  <button id="btnUndo" title="撤回"><i class="fas fa-undo"></i></button>
                  <button id="btnRedo" title="重做"><i class="fas fa-redo"></i></button>
                  <button id="btnPreview" title="预览"><i class="fas fa-eye"></i></button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 版本历史面板 -->
    <div id="versionsPanel">
        <div class="panel-header">
            <h3><i class="fas fa-clock"></i> 历史版本</h3>
            <button id="closeVersionsBtn" class="btn-close">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <div class="versions-container">
            <ul id="versionsList"></ul>
        </div>
    </div>
    
    <!-- 导入操作弹窗 -->
    <div id="importModal" class="import-modal hidden">
      <div class="import-modal-content">
        <h3><i class="fas fa-file-import"></i> 导入笔记</h3>
        <div class="import-options" style="display: flex; flex-direction: column; gap: 12px; align-items: stretch; margin-bottom: 12px;">
          <button id="importMdBtn" class="import-option-btn"><i class="fas fa-file-alt"></i> 导入单个 Markdown 文件</button>
          <button id="importFolderBtn" class="import-option-btn"><i class="fas fa-folder-open"></i> 导入 Markdown 文件夹</button>
          <button id="importZipBtn" class="import-option-btn"><i class="fas fa-file-archive"></i> 导入 zip 包</button>
          <button id="importHtmlBtn" class="import-option-btn"><i class="fas fa-file-code"></i> 导入 HTML 文件</button>
        </div>
        <button id="importModalCloseBtn" class="btn-close"><i class="fas fa-times"></i></button>
      </div>
    </div>
    
    <!-- 加载脚本 -->
    <script src="app.js"></script>
    <script>
      // 注册 Service Worker
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('service-worker.js').then(function(reg) {
            // 检查更新
            if (reg.waiting) {
              alert('检测到新版本，刷新页面以更新。');
            }
            reg.onupdatefound = function() {
              var installingWorker = reg.installing;
              installingWorker.onstatechange = function() {
                if (installingWorker.state === 'installed') {
                  if (navigator.serviceWorker.controller) {
                    alert('检测到新版本，刷新页面以更新。');
                  }
                }
              };
            };
          }).catch(function(err) {
            console.error('Service Worker 注册失败:', err);
          });
        });
      }
    </script>
    <script>
      window.MathJax = {
        tex: {
          inlineMath: [['$', '$'], ['\\(', '\\)']],
          displayMath: [['$$', '$$'], ['\\[', '\\]']]
        }
      };
    </script>
    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" defer></script>
</body>
</html>